<script setup lang="ts">
import { getMemberAddressByIdAPI, postMemberAddressAPI, putMemberAddressByIdAPI } from '@/services'
import { onLoad, onReady } from '@dcloudio/uni-app'
import type { RegionPickerOnChange, SwitchOnChange } from '@uni-helper/uni-app-types'
import type {
  UniDataPickerOnChange,
  UniFormsInstance,
  UniFormsRules,
} from '@uni-helper/uni-ui-types'
import { ref } from 'vue'

interface Props {
  id?: string
}
const query = defineProps<Props>()
onReady(() => {
  uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })
})

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})
// 表单校验规则
const rules: UniFormsRules = {
  receiver: {
    rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
  },
  contact: {
    rules: [
      { required: true, errorMessage: '请输入联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
  countyCode: {
    rules: [{ required: true, errorMessage: '请选择所在地区' }],
  },
  address: {
    rules: [{ required: true, errorMessage: '请输入详细地址' }],
  },
}
// 获取收货地址详情数据
const getMemberAddressByIdData = async () => {
  if (query.id) {
    const res = await getMemberAddressByIdAPI(query.id)
    // 把数据合并到表单中（数据回显）
    // Object.assign(form.value, res.result)
    form.value = { ...form.value, ...res.result }
  }
}
onLoad(() => {
  getMemberAddressByIdData()
})

// #ifdef MP-WEIXIN
// 修改所在地区
const onRegionChange: RegionPickerOnChange = (e) => {
  const fullLocation = e.detail.value.join(' ')
  const [provinceCode, cityCode, countyCode] = e.detail.code!
  // 把数据合并到表单中
  // Object.assign(form.value, { provinceCode, cityCode, countyCode })
  form.value = { ...form.value, fullLocation, provinceCode, cityCode, countyCode }
}
// #endif

// #ifdef H5 || APP-PLUS
// 修改所在地区
const onCityChange: UniDataPickerOnChange = (e) => {
  const [province, city, county] = e.detail.value
  form.value = {
    ...form.value,
    provinceCode: province.value,
    cityCode: city.value,
    countyCode: county.value,
  }
}
// #endif

// 切换是否为默认收货地址
const onSwitchChange: SwitchOnChange = (e) => {
  form.value.isDefault = e.detail.value ? 1 : 0
}

const formRef = ref<UniFormsInstance | null>(null)
// 提交表单
const onSubmit = () => {
  formRef.value
    ?.validate?.()
    ?.then(async () => {
      // 表单校验通过后再发送请求
      if (query.id) {
        // 修改地址
        await putMemberAddressByIdAPI(query.id, form.value)
      } else {
        // 新建地址
        await postMemberAddressAPI(form.value)
      }
      uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '新建成功' })
      setTimeout(() => {
        uni.navigateBack()
      }, 400)
    })
    .catch(() => {
      uni.showToast({ icon: 'error', title: '请正确填写信息' })
    })
}
</script>

<template>
  <view class="content">
    <uni-forms ref="formRef" :model="form" :rules="rules" validate-trigger="bind">
      <!-- 收货人 -->
      <uni-forms-item name="receiver" class="form-item">
        <text class="label">收货人</text>
        <input v-model="form.receiver" class="input" placeholder="请填写收货人姓名" />
      </uni-forms-item>
      <!-- 手机号码 -->
      <uni-forms-item name="contact" class="form-item">
        <text class="label">手机号码</text>
        <input v-model="form.contact" class="input" placeholder="请填写收货人手机号码" />
      </uni-forms-item>
      <!-- 所在地区 -->
      <uni-forms-item name="countyCode" class="form-item">
        <text class="label">所在地区</text>
        <!-- #ifdef MP-WEIXIN -->
        <picker
          class="picker"
          mode="region"
          :value="form.fullLocation.split(' ')"
          @change="onRegionChange"
        >
          <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
        <!-- #endif -->

        <!-- #ifdef H5 || APP-PLUS -->
        <uni-data-picker
          v-model="form.countyCode"
          placeholder="请选择省/市/区(县)"
          popup-title="请选择省/市/区(县)"
          collection="opendb-city-china"
          field="code as value, name as text"
          orderby="value asc"
          :step-searh="true"
          parent-field="parent_code"
          self-field="code"
          :clear-icon="false"
          :preload="true"
          @change="onCityChange"
        ></uni-data-picker>
        <!-- #endif -->
      </uni-forms-item>
      <!-- 详细地址 -->
      <uni-forms-item name="address" class="form-item">
        <text class="label">详细地址</text>
        <input v-model="form.address" class="input" placeholder="街道、楼牌号等信息" />
      </uni-forms-item>
      <!-- 设为默认地址 -->
      <uni-forms-item class="form-item">
        <label class="label">设为默认地址</label>
        <switch
          class="switch"
          color="#27ba9b"
          :checked="form.isDefault === 1"
          @change="onSwitchChange"
        />
      </uni-forms-item>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="onSubmit">保存并使用</button>
</template>

<style lang="scss">
/* #ifdef H5 || APP-PLUS */
// 深度选择器修改uni-data-picker组件样式
:deep(.uni-data-pickerview) {
  .selected-area {
    flex: 0 1 auto;
    height: auto;
  }
}

:deep(.uni-forms-item__content) {
  display: flex;
  align-items: center;
}

:deep(.uni-forms-item__error) {
  margin-left: 200rpx;
}

:deep(.input-value) {
  padding-left: 0;
  height: fit-content;
  font-size: 32rpx;

  .selected-area {
    .selected-list {
      flex-wrap: wrap;

      .selected-item {
        flex-shrink: 0;
      }
    }
  }

  .placeholder {
    font-size: 32rpx;
  }
}

:deep(.input-value-border) {
  border-color: transparent;
}
/* #endif */

page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 25rpx 10rpx 40rpx;
    min-height: 96rpx;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    background-color: #fff;

    /* 调整uni-forms样式 */
    .uni-forms-item__content {
      display: flex;
      align-items: center;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  margin: 30rpx 20rpx;
  height: 80rpx;
  font-size: 30rpx;
  color: #fff;
  border-radius: 80rpx;
  background-color: #27ba9b;
}
</style>
